<template>
  <div>
    <template>
      <el-input prefix-icon="el-icon-search" autofocus="true"  v-model="keyword" size="mini" placeholder="输入名字搜索" />
    </template>
    <el-table :data="userMoneyList | keywordFn(keyword)" style="width: 100%" v-loading="loading">
      <el-table-column prop="parentUser.name" label="缴费人员" width="180"></el-table-column>
      <el-table-column prop="parentCell.name" label="居住单元" width="180"></el-table-column>
      <el-table-column prop="parentFloor.name" label="居住楼房" width="180"></el-table-column>
      <el-table-column prop="parentUser.room" label="居住房间" width="180"></el-table-column>
      <el-table-column prop="payMoney" label="缴费金额" width="180"></el-table-column>
      <el-table-column prop="updatedAt" label="缴费时间" width="180"></el-table-column>
      <el-table-column prop="note" label="备注" width="180"></el-table-column>

      <el-table-column  align="right">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-delete"
            type="danger"
            @click="remove(scope.row)"
            style="margin:5px 3rem 0 0"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      model: {
        parentUser: null,
        payMoney: 200
      },
      userMoneyList: null,
      loading: true,
      userList: [],
      isplay: [
        {
          value: 0,
          label: "未缴"
        },
        {
          value: 1,
          label: "已缴"
        }
      ],
      //选择的信息
      selectList: null,
      //应该上缴的金额
      showMoney: 200
    };
  },
  mounted() {
    this.fetchUserMoney();
    this.fetchUser();
  },
  methods: {
    cancel() {
      this.model = {};
    },
    //确认用户的操作
    async confirmUser() {
      const response = await this.$http.get(
        `rest/user_one/${this.model.parentUser}`
      );
      this.selectList = response.data;
      //数据赋值
      this.model.parentUser = this.selectList._id;
      this.model.parentCell = this.selectList.parentCell._id;
      this.model.parentFloor = this.selectList.parentFloor._id;

      //获取金额
      const showMoney_one = await this.$http.get(
        `rest/money_one/${this.selectList.parentCell._id}`
      );
      this.showMoney = showMoney_one.data;
      this.model.payMoney = this.showMoney.number;
    },
    //获取列表
    async fetchUserMoney() {
      const userMoney_list = await this.$http.get("rest/userMoney_list");
      this.userMoneyList = userMoney_list.data;

      //遍历时间修改格式
      this.userMoneyList.map(function(item, index, array) {
        var first = item.updatedAt.substring(0, 10);
        var two =  item.updatedAt.substring(14, 19);
        item.updatedAt = first + " "+ two
        array.userMoneyList = item.updatedAt;
      });

      this.loading = false;
    },
    async fetchUser() {
      const user_list = await this.$http.get("rest/user_list");
      this.userList = user_list.data;
    },
    async save() {
      if (1) {
        const response = await this.$http.post(
          "rest/add_UserMoney",
          this.model
        );
        this.fetchUserMoney();

        this.$message({
          type: "success",
          message: "保存成功",
          duration: 2000
        });
      } else {
        this.$message({
          type: "warning",
          message: "重复缴费",
          duration: 2000
        });
      }
    },
    //删除
    remove(row) {
      this.$confirm(`是否删除"${row.parentUser.name}"的缴费记录?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`rest/UserMoney/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        this.fetchUserMoney();
      });
    }
  },
  //搜索功能实现
  filters: {
    keywordFn(userMoneyList, keyword) {
     
      keyword = keyword.replace(/\s*/g, "");
      if (userMoneyList) {
         userMoneyList = Array.from(userMoneyList);
        if (keyword == "" || keyword == undefined) {
          return userMoneyList;
        } else {
          let newUserList;

          newUserList = userMoneyList.filter(function(item) {
            if (item.parentUser.name == keyword) return item;
          });

          return newUserList
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>